<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素节点的方式</title>
</head>
<body>

<div>
    <div id="div1">测试</div>
</div>

<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>

<div id="div2">
    <div class="btn">1</div>
    <div class="btn">2</div>
    <div class="btn">3</div>
    <div class="btn">4</div>

    <input type="text" name="username">
    <input type="radio" name="gender" value="0">男
    <input type="radio" name="gender" value="1">女
</div>




<script>

    // 1. 根据id获取元素
    var e1 = document.getElementById("div1");
    e1.innerHTML = "修改文本";

    // 2. 获取所有的p标签
    var ps = document.getElementsByTagName("p");
    console.log(ps);
    // 遍历获取的所有元素
    for (var i = 0; i < ps.length; i++) {
        console.log(ps[i].innerHTML);
        ps[i].innerHTML = "第"+i+"段";
    }

    // 3. 按照class值获取标签
    var btns = document.getElementsByClassName("btn");

    // 4. 按照name值获取标签
    var gs = document.getElementsByName("gender");
    console.log(gs);

    // 5. 获取标签的父标签
    console.log(e1.parentNode);

    // 6. 获取标签的所有子标签
    var e2 = document.getElementById("div2");
    console.log(e2.children);

    // 所有的标签都可以使用上面的获取标签的方法
    // 只获取自己子标签中的对应元素
    var ds = e2.getElementsByTagName("div");
    console.log(ds);



</script>

</body>
</html>